<template>
	<div class="pt-4 rankingList">
		<template v-if="listPart1 && listPart1.length">
			<div class="fw-bold fs-5 pb-3">官方榜</div>
			<div v-for="(item, index) in listPart1" :key="index" class="d-flex listItem">
				<SongListSquare
					class="flex-shrink-0"
					@onClickCover="$router.push({ name: 'createdMusicList', query: { id: item.id } })"
					@onClickPlay="$router.push({ name: 'createdMusicList', query: { id: item.id, immediate: true } })"
					:picUrl="item?.coverImgUrl"
					placement="center"
					size="200"
					playSize="46"
					:updateFrequency="item?.updateFrequency"
				/>
				<div class="flex-grow-1 ms-5 mb-5">
					<MusicList
						:columns="columns"
						:startSpace="false"
						:colItemStyle="{ padding: '0.5rem' }"
						:dataSource="item?.list?.slice(0, 5)?.map((item, index) => ({ ...item, index: index }))"
					>
						<template #songTitle="{ index, al }">
							<div class="ms-3 text-ellipsis">
								<span class="fw-bold fs-5" :class="{ 'text-primary': index < 3, 'text-muted': index > 2 }">{{ index + 1 }}</span>
								<span class="ms-2">{{ al.name }}</span>
							</div>
						</template>
						<template #artist="{ ar }">
							<span class="me-3">
								{{ ar.map((item) => item.name).join("/") }}
							</span>
						</template>
					</MusicList>
					<div
						@click="$router.push({ name: 'createdMusicList', query: { id: item.id } })"
						class="d-flex align-items-center hover-opacity mt-3"
					>
						<span class="me-1">查看全部</span>
						<thin-arrow-right-icon width="14" height="14" />
					</div>
				</div>
			</div>
		</template>

		<template v-if="listPart2 && listPart2.length">
			<div class="fw-bold fs-5 pb-3">全球榜</div>
			<div class="d-flex flex-wrap justify-content-between globalRankingList">
				<SongListSquare
					v-for="(item, index) in listPart2"
					:key="index"
					class="globalRankingItem"
					@onClickCover="$router.push({ name: 'createdMusicList', query: { id: item.id } })"
					@onClickPlay="$router.push({ name: 'createdMusicList', query: { id: item.id, immediate: true } })"
					:picUrl="item?.coverImgUrl"
					:name="item?.name"
					placement="center"
					playSize="46"
					:updateFrequency="item?.updateFrequency"
					:paddingSize="`${100 / columnNum - 3}%`"
				/>
				<div v-for="item in columnNum - (listPart2.length % columnNum)" :key="item" class="globalRankingItem" style="width: 22%"></div>
			</div>
		</template>
	</div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, toRefs } from "vue";
import { getTopListApi } from "@/api/common";
import { getPlayListDetailApi } from "@/api/playList";
import { AxiosResponseProps } from "@/utils/request";
import ArrowRightIcon from "@/components/svgIcons/ArrowRightIcon.vue";
// import { orderRequest } from "@/utils/request";
export default defineComponent({
	components: { ArrowRightIcon },
	setup() {
		const state = reactive({
			list: [],
			columns: [
				{ span: 9, slots: { customRender: "songTitle" } },
				{ slots: { customRender: "artist" }, colItemStyle: { "text-align": "right" } },
			],
			columnNum: 4,
			listPart1: computed(() => state.list.slice(0, state.columnNum) || []),
			listPart2: computed(() => state.list.slice(state.columnNum) || []),
		});
		interface TopListResponse extends AxiosResponseProps {
			list: any[];
		}
		const fetchData = () => {
			state.list = [];
			getTopListApi().then((res: Partial<TopListResponse>) => {
				if (res.code === 200) {
					//并行请求，优点：请求速度快；缺点：不能按顺序返回响应
					res.list.forEach((item, index) => {
						getPlayListDetailApi({ id: item.id }).then((res1: any) => {
							state.list[index] = { ...item, list: res1.playlist.tracks };
						});
					});
					//串行请求，优点：能按顺序请求；缺点：不能并发进行请求，请求速度过慢；
					// let requestList = res.list.map((item) => () => {
					//   return getPlayListDetailApi({ id: item.id });
					// });
					// orderRequest(requestList, (result, index) => {
					//   res.list[index].list = result.playlist.tracks;
					//   state.list.push(res.list[index]);
					// });
				}
			});
		};
		fetchData();
		return {
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
.rankingList {
	.listItem {
		& + & {
			margin-top: 6px;
		}
	}
	.globalRankingList {
		/* width: calc(230px * 4 + 34px * 3); */
		.globalRankingItem {
			/* margin-top: 34px;
			&:first-child,
			&:nth-child(2),
			&:nth-child(3),
			&:nth-child(4) {
				margin-top: 0;
			} */
		}
	}
}
</style>
